<template>
	<view class="home" style="background: linear-gradient(#fbfdff, #eee);">
		<view class="scanCode" v-show="showScan">
			<BarScan ref="qrcode" @ok="getResult" @err="geterror" v-if="showScan"></BarScan>
		</view>
		<view class="current"></view>
		<view class="textName">
			首页
		</view>
		<view class="index-top">
			<view class="search" :style="{height: statusBarHeight+'px'}">
				<!-- <view class="" style="display: f;"> -->
					<input type="search"  tabindex="-1" name="" id="" class="topSearch" placeholder="搜索变电站名称/设备名称" placeholder-style="color: #D9D9D999;width:90%" @blur="getSearch">
				<!-- </view> -->
				
				<image src="@/static/home/Vector.png" mode="" class="searchBtn" @click="search" ></image>
				<!-- <u-icon name="close-circle" color="#fff;" v-if="!cl" size="18"
					@click="closeSearch">
				</u-icon> -->
				<image src="@/static/home/c.png" mode="" class="searchBtn2" @tap.code="toNew()"></image>
				<!-- <view class="" style="width: 10%;height: 40px;line-height: 40px;font-size: 16px;" @click="search">
					搜索
				</view> -->
			</view>
			<view class="" style="display: flex;">
				<view class="imgBig">
					<view class="imgItem" v-for="(i,num) in imgList" :key="num">
						<view class=""  @tap.stop="toDetail(i)" style="display: flex;">
							<view class="pic" >
								<image :src="i.url" mode="widthFix"></image>
							</view>
							<view class="tex" v-if="i.title">
								{{i.title}}
							</view>
						</view>
						
						<view class="" v-if="i.title" @tap.stop="clearChoose(num)" style="margin: 20rpx 0rpx;text-align: right;width: 20%;">
							<u-icon name="close-circle"  color="#222222;" size="28" ></u-icon>
						</view>
						<view class="no" v-else style=""  @tap.stop="toDetail(i)">
							<view class="top">
								{{i.top}}
							</view>
							<view class="two" >
								{{i.two}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="listBox" :style="{top:top}">
			<scroll-view enable-back-to-top=true scroll-y="true" class="scrollHight"  :style="{height:height}"  @scrolltoupper="upper"
				@scrolltolower="lower" :refresher-enabled="true" :refresher-threshold="100"
				:refresher-triggered="isTriggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherpulling="onPulling">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="code" style="color: #469D96;font-size: 30rpx;">
							{{item.deviceName}}
						</view>
					</view>
					<view class="list_t ">
						<view class="" style="display: flex;margin-bottom: 10rpx;">
							<view class="name" style="width: 38%;">日期</view>
							<view class="name" style="width: 61%;">定值单号</view>
						</view>
						<view v-if="item.protectList.length == 0" style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;color: #979797">暂无</view>
						<view class="list_t_r" v-for="(i,ind) in item.protectList" :key="ind" v-else>
							<view class="" v-for="(it,t) in i.version" :key="t" style="display: flex;" @tap.stop="toParameterDetails(item.deviceId,it.id,i.protectDeviceId)">
								<view class="specifications" style="width: 38%;">{{it.fileDate}}</view>
								<view class="specifications" style="width: 61%;">{{it.fileNo}}</view>
							</view>
							<view style="width: 100%;height: 2rpx;background: #D9D9D9;" v-if="ind!= (item.protectList.length-1)"></view>
						</view>
					</view>
				</view>
				<!-- 提示栏 -->
				<view style="width: 100%; text-align: center; font-size: 40rpx; margin-top: 140rpx;" v-if="list.length == 0">暂无</view>
			</scroll-view>
		</view>
		<!-- <view class="" >
			<view class="one" @tap.code="toNew()"></view>
			<view class="contentBox">
				<view class="imageBox">
					<image src="/static/home/code.png" mode="widthFix"></image>
				</view>
				
			</view>
		</view> -->
		
		
		<!-- 内容 -->
		<u-popup v-model="show" mode="bottom">
			<view class="list">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="code">
						产品信息
					</view>
					<!-- <view class="code" style="color: #FF3E3E;">{{item.status == 0 ? '未付款' : '已支付' }}</view> -->
				</view>
				
				<view class="list_t flex-r-b-c">
					<image :src="image+mesList.imgUrl" mode=""></image>
					<view class="list_t_r">
						<view class="list_t_r_t flex-r-b-c">
							<view class="name">名称：{{mesList.name}}</view>
						</view>
						<view class="specifications">积分：{{mesList.point}}</view>
						<view class="time">状态：{{mesList.state == 0 ? '暂未回收':'回收中'}}</view>
						<view class="" style="display: flex;" v-if="mesList.qrCode && !hasCode">
							<view class="rece" style="margin-top: 30rpx;height: 50rpx;line-height: 50rpx;"  @tap.code="toCode()">
								扫一扫
							</view>
							<view class=""  style="margin: 30rpx 20rpx;height: 50rpx;line-height: 50rpx;color: #979797;">
								( 请扫码外包装二维码 )
							</view>
						</view>
						
					</view>
				</view>
				<view class="" style="display: flex; align-items: center;" v-if="hasCode || !mesList.qrCode">
					<view class="" style="width: 73%;margin-right: 40rpx;">
						<u-form :model="form" ref="uForm" label-position="top" >
							<u-form-item label="请输入烟盒内部防伪码：">
								<u-input v-model="antiFakeCode" type="number" :border="true" />
							</u-form-item>
						</u-form>
					</view>
					<view class="rece" @tap.stop="receiveSure()">
						确认回收
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="showV"  :default-selector="[0]" :range="selectorObj" range-key="deviceVoltageLevel" @confirm="chooseV"></u-picker>
	</view>
</template>

<script>
	import BarScan  from '@/pages/components/qrcode/qrcode.vue';
	export default {
		data() {
			return {
				id:'',
				showV:false,
				e: null,
				inviter_id: 'xxx',
				height: this.$utils.height(),
				image: this.$base.smallimgUrl,
				selectorObj:[],
				swiperList: [],
				// isImg:true,
				advert:'',
				bannerList:[],
				bigImg:this.$base.imgUrl,
				is_open: 0,
				t:'',
				list: [],
				homelist: ['暂无'],
				mesList:[],
				imgList:[
					{
						url:'/static/home/f1.png',
						path:'/pages/shop/choiceCity/choiceCity',
						title:'',
						top:'选择区域',
						two:'请选择属于你的区域'
					},
					{
						url:'/static/home/f2.png',
						path:'/pages/shop/choiceStation/choiceStation',
						title:'',
						top:'选择变电站',
						two:'变电站多样化选择'
					},
					{
						url:'/static/home/f3.png',
						path:'',
						title:'',
						top:'选择电压等级',
						two:'电压选择'
					},
					{
						url:'/static/home/f4.png',
						path:'/pages/shop/choiceDevice/choiceDevice',
						title:'',
						top:'选择设备',
						two:'请选择设备'
					},
				],
				docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
				showHeight: document.documentElement.clientHeight,   //实时屏幕高度
				show:false,
				count:'',
				antiFakeCode:'',
				barCode:'',
				yhDetailsId:'',
				hasCode: false,
				statusBarHeight: 50,
				isTriggered: false, //定义一个用来表示下拉刷新是否被触发，当更新完数据需要重新定义为false
				form: {
					page: 1
				},
				showScan: false,
				areaId:'',
				substationId:'',
				voltageLevel:'',
				keyword:'',
				top:''
			};
		},
		components:{
			BarScan
		},
		created() {
			let systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
		},
		mounted() {
		  // window.onresize监听页面高度的变化
		  window.onresize = ()=>{
		    return(()=>{
		      this.showHeight = document.body.clientHeight;
		    })()
		  }
		},
		watch:{
		  showHeight:function() {
		    if(this.docmHeight > this.showHeight){
				console.log('我有')
		      this.top = '820rpx'
		    }else{
				
			  	console.log('我没又')
		    }
		  }
		},
		onReady() {
			this.height = uni.getSystemInfoSync().windowHeight - 136 + 'px';
		},
		onLoad(e) {
			// console.log(e,'eeeeeeeeewwwwwwwwwwww')
			if(e.q&&e.q!="undefined"){//扫码进入
				const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
				//GetWxMiniProgramUrlParam() 这个方法是解析链接地址中的参数方法
				e = this.GetWxMiniProgramUrlParam(qrUrl);//此处就是我们要获取的参数 json
				console.log(e,'eeee1111111111')
				//比如我要得到inviter_id的值，直接取值即可
				uni.setStorageSync('inviter_id',e.inviter_id)
				this.t = uni.getStorageSync('inviter_id')
			}
			if(e.inviter_id){
				uni.setStorageSync('inviter_id',e.inviter_id)
			}
			if(e.scene){
				uni.setStorageSync('scene',e.scene)
			}
			// uni.hideTabBar()
			this.e = e
			// this.showImg()
			
		},
		onShow() {
			uni.setNavigationBarTitle({
				// title: '当前城市-' + this.nowCity
				title: '变电站保护定值一体化数字管理系统',
				fontSize:'20rpx'
			})
			this.showScan = false
			this.getDeviceList()
			this.getVoltageLevelList()
		},
		methods: {
			toParameterDetails(a,b,c){
				uni.navigateTo({
					url:`/pages/tabBar/parameterDetails/parameterDetails?deviceId=${a}&versionId=${b}&protectDeviceId=${c}`
				})
			},
			getSearch(e){
				this.keyword = e.detail.value
				console.log(this.keyword,'我获取了焦点')
				// if(this.keyword == '') this.getDeviceList()
				// console.log(e.detail.value,'eeeee')
			},
			search(e){
				this.getDeviceList()
			},
			chooseV(e){
				this.imgList[3].title = '' 
				this.id = ''
				this.imgList[2].title = this.selectorObj[e].deviceVoltageLevel
				this.voltageLevel = this.selectorObj[e].id
				this.getDeviceList()
			},
			getVoltageLevelList(){
				let that = this
				that.$api.voltageLevelList().then(res => {
					that.selectorObj = res.data.rows
					// console.log(res.data.rows,'voltageLevelList')
				})
			},
			clearChoose(num){
				this.imgList[num].title = ''
				// console.log(num,'num')
				if(num == 0){
					this.areaId = ''
					this.substationId = ''
					this.imgList[1].title = ''
					this.imgList[3].title = ''
				}else if(num == 1){
					this.substationId = ''
					this.imgList[3].title = ''
				}else if(num == 2){
					this.voltageLevel = ''
					this.id = ''
					this.imgList[3].title = ''
				}else{
					this.id = ''
				}
				this.getDeviceList()
			},
			getResult(result){
				this.result = result;
				console.log(this.result,'result')
				uni.navigateTo({
					url: `/pages/tabBar/codeDetails/codeDetails?data=${result}`
				})
				this.showScan = false
				
			},
			geterror(e){
				console.log('我拒绝了',e)
				// this.showScan = false
				// this.$toast(e)
			},

			onPulling(e) {
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.isTriggered = true;
				// console.log("onpulling", e);
			},
			upper: function(e) {
				// console.log('到达顶部吧')
			},
			lower: function(e) {
				// console.log('到达底部吧')
				if (this.form.page < this.last_page) {
					this.form.page = this.form.page + 1
					
					// this.projectList()
				}
			},
			onRefresh() {
				// console.log("自定义下拉刷新被触发");
				// this.closeSel()
				this.isTriggered = false;
			},
			onRestore() {
				// console.log("自定义下拉刷新被复位");
			},
			// 扫码详情
			toNew(){
				this.showScan = true
			},
			toCode(){
				let that = this
				uni.scanCode({
					success: function(res) {	
						// that.barCode = res.result
						// console.log(res.result,'that.toCode')
						if(res.result){
							setTimeout(()=>{
								that.$utils.toast('扫码成功')
							},1000)
							setTimeout(()=>{
								that.hasCode = true
							},2000)
							
						}
						// that.$api.checkBarCode({
						// 	barCode:that.barCode
						// }).then(res => {
						// 	console.log(res.data,'res')
						// 	that.mesList = res.data.data
						// 	that.yhDetailsId = res.data.data.id
						// 	that.show = true
						// })
					}
				});
				
			},	
			receiveSure(){
				let that = this
				if(!that.antiFakeCode) return that.$utils.toast('防伪码不能为空')
				that.$api.scanCodeAdd({
					antiFakeCode:that.antiFakeCode,
					barCode:that.barCode,
					yhDetailsId:that.yhDetailsId
				}).then(res => {
					that.show = false
					
					if(res.data.code == 200){
						uni.showToast({
							title: '回收成功！',
							icon: 'none',
							duration: 2500
						})
						
					}
				})
			},
			// 跳转
			toDetail(url){
				console.log(url,'url')
				if(url.path){
					// console.log(`${url.path}?nowCity=${url.title}`,'title')
					uni.navigateTo({
						url:`${url.path}?nowCity=${url.title}`
					})
				}else{
					this.showV = true
				}
				
				
			},
			GetWxMiniProgramUrlParam (url) {
			  let theRequest = {};
			  if(url.indexOf("#") != -1){
				  const str=url.split("#")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }else if(url.indexOf("?") != -1){
				  const str=url.split("?")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }
			  return theRequest;
			  },

			showImg(){
				let that = this
				
				that.$api.advert().then(res => {
					this.advert = res.data.data.img
					this.is_open = res.data.data.is_open
					if(this.is_open != 1){
						this.isImg = false
						uni.reLaunch({
							url:'/pages/check/check'
						})
					}else{
						setTimeout(()=>{
							this.isImg = false
							uni.showTabBar()
						},3000)
					}
				})
			
			},
			// 变电站设备列表
			getDeviceList(){
				console.log('我执行了')
				let that = this
				that.$api.detailList({
					areaId: that.areaId,
					substationId: that.substationId,
					voltageLevel: that.voltageLevel,
					keyword: that.keyword,
					id: that.id
				}).then(res => {
					that.list = res.data.rows
					console.log(that.list,'that.list')
				})
				
			},
			// 生成pk活动
			activity(){
				let that = this
				that.$api.pkIndexCreate().then(res => {
					uni.navigateTo({
						url: '/pages/pk/pk?active_id=' + res.data.data.active_id
					})
				})
			},
			
			// 
			goShop(){
				let that = this
				uni.switchTab({
					url: '/pages/tabBar/shop/shop'
				})
			},
			
		}
	}
</script>

<style lang="less">
	
	page{
		background-color: #f9f9f9;
	}
	
	.scanCode {
		position: fixed;
		height: 100%;
		width: 100vw;
		background: rgba(0, 0, 0, 0.5);
		z-index:1;
		overflow: hidden;
	}
	::v-deep .uni-page-head .uni-page-head__title  {
		font-size: 26rpx !important;
	}
	::v-deep .search .u-search__action {
		color: #00C777
	}
	::v-deep .search .u-icon {
		position: absolute;
		height: 40rpx;
		width: 40rpx;
		padding: 8rpx;
		color: #777e81 !important;
		right: 36rpx;
		bottom: 6rpx;
		z-index: 9999;
	}
	::v-deep .pic button::after{
		border: none;
		background-color: transparent;
		outline: none;    
	}
	.current {
		background: url();
		// background: url(../../static/selectBot.png);
		background-size: 100% 100%;
		height: 900px;
		background-repeat: no-repeat;
		position: fixed;
		top: -30px;
		overflow: hidden;
		left: 0;
		width: 100%;
	}
	.textName{
		top: 3%;
		left: 45%;
		position: fixed;
		color: #fff;
		font-size: 34rpx;
	}
	.list{
		width: 100%;
		height: auto;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx auto;
			
		.rece{
			width: 22%;
			height: 60rpx;
			background: #979797;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			border-radius: 6rpx;
			margin-top: 80rpx;
		}
		.code{
			color: #000;
			font-weight: 600;
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 14rpx;
		}
		.list_t{
			border-top: 1px solid #F9F9F9;
			padding: 10rpx 0;
			image{
				width: 170rpx;
				height: 220rpx;
				margin-right: 30rpx;
			}
				
			::v-deep .u-form-item{
				padding-top: 0 !important;
				width: 70%;
			}
			.list_t_r{
				width: 100%;
				.list_t_r_t{
					font-size: 28rpx;
					font-weight: 400;
					.name{
						margin-top: 10rpx;
					}
					.state{
						color: #7F8084;
					}
				}
				.specifications{
					font-size: 26rpx;
					font-weight: 400;
					color: #979797;
					margin: 8rpx 0;
				}
				.time{
					font-size: 24rpx;
					font-weight: 400;
					color: #979797;
					margin: 20rpx 0;
				}
			}
		}
		.list_b{
			font-size: 28rpx;
			font-weight: 400;
			color: #7F8084;
			padding-top: 30rpx;
			.text{
				.money{
					display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
				}
			}
		}
		
		.btnBox{
			width: 100%;
			margin-top: 30rpx;
			flex-direction: row-reverse !important;
			.btn{
				width: 132rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 46rpx;
				text-align: center;
				background-color: #000;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		
	}
	.home{
		width: 100vw;
		height: 100vh;
		overflow-x: hidden;
		background: #fff;
		.index-top {
			position: absolute;
			width: 100%;
			top: 38%;
		}
		.search {
			position: relative;
			padding: 0 20rpx;
			width: 100%;
			height: 68rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			min-height: 28px;
		}
		
		.topSearch {
			border: 1px solid #ccc;
			border-radius: 10px;
			height: 78rpx;
			line-height: 78rpx;
			// display: inherit;
			padding: 0 80rpx;

			padding-right: 80rpx;
			background: #fff;
			width: 98%;
		}
		.select_icon{
			width:80rpx;
			height: 70rpx;
			margin: 30rpx auto;
			// border: 1px solid gray;
			text-align: center;
			image{
				width: 27rpx;
				height: 25rpx;
				margin: 12rpx 10rpx 1rpx 10rpx;
			}
			view{
				font-size: 20rpx;
				color: #fff;
			}
		}
		
		.selectTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			margin-left: 30rpx;
			padding: 20rpx 40rpx;
			// background: #fff;
			// border-bottom: 1px solid #E2E2E2;
			color: #979797;
			font-size: 24rpx;
			position: relative;
			width: 68%;
			background: #fff;
			height: 34rpx;
			height: 34rpx;
			border-radius: 20rpx;
			.line{
				width: 2rpx;
				height: 34rpx;
				line-height: 34rpx;
				background: gainsboro;
			}
			
			.item {
				width: 35%;
				display: flex;
				// background: #F5F5F5;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 60px;
				padding: 15rpx;
		
				.select {
					flex: 1;
				}
		
				.arrow {
					width: 20rpx;
					height: 14rpx;
					margin-right: 8rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		.searchBtn,.searchBtn2 {
			position: absolute;
			height: 46rpx;
			width: 46rpx;
			padding: 8rpx;
			bottom: 18rpx;
		}
		.searchBtn{
			left: 36rpx;
		}
		.searchBtn2 {
			right: 66rpx;
		}
		
		.one{
			width: 34%;
			height: 9%;
			position: absolute;
			z-index: 1000;
			top: 9.4%;
			left: 62%;
			color: transparent;
			// border: 1px solid black;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.logoBox{
			width: 92rpx;
			margin-left: 50rpx;
		}
		.imgBig{
			margin:8rpx 15rpx;
			display: flex;
			flex-wrap: wrap;
			.imgItem{
				width: 342rpx;
				height: 120rpx;
				border-radius: 10rpx;
				text-align: center;
				justify-content: space-between;
				vertical-align: center;
				padding:20rpx;
				margin:10rpx;
				background:#fff;
				display: flex;
				.pic{
					width: 53rpx !important;
					height: 52rpx !important; 
					// border: 1px solid green;
					margin: 20rpx 10rpx 10rpx 8rpx;
					image{
						width: 43rpx !important;
						height: 40rpx !important; 
					}
				}
				.no{
					text-align: left;
					font-size: 24rpx;
					font-size: 22rpx !important;
					text-align: left;width: 76%;
					.top{
						font-size: 30rpx;
						font-weight: 500;
						margin-bottom: 4rpx;
					}
					.two{
						color: #BABABA;
						font-size: 22rpx !important;
					}
				}
				.tex{
					width: 224rpx;
					margin: 20rpx 0;
					font-size: 30rpx;
					font-weight: 500;
					// display: flex;
					justify-content: space-between;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
			}
		}
		.swiper{
			width: 90%;
			height: 136rpx;
			background: #fff;
			margin: 10rpx auto 20rpx;
			border-radius: 24rpx;
			position: absolute;
			bottom: 10rpx;
			left: 40rpx;
			z-index: 10;
			.textBox{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.imgBox{
					width: 70rpx !important;
					height: 70rpx !important;
					border-radius: 50%;
					overflow: hidden;
					margin-right:4rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					font-weight: 400;
					margin-left: 8rpx;
					margin-right: 6rpx;
					flex: 1;
				}
			}
		}
		.contentBox{
			width: 100%;

			.imageBox {
				width: 92%;
				margin: 20rpx 30rpx;
				position: absolute;
				left: 0;
				top: 55%;
				z-index: 1;
			}
			.other{
				margin: 30rpx 30rpx 0;
				width: 140rpx;
			}
			.listBox{
				width: 100%;
				height: 166rpx;
				background-color: #f9f9f9;
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				position: fixed;
				left: 0;
				top: -133rpx;
				z-index: 9;
				.list{
					width: 330rpx;
					height: 330rpx;
					background-color: #fff;
					border-radius: 24rpx;
					margin-top: -165rpx;
					text-align: center;
					.imgBox{
						margin: 0 auto;
						margin-top: 60rpx;
					}
					.title{
						font-size: 32rpx;
						font-weight: 600;
						margin: 20rpx auto;
					}
					.text{
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;
					}
				}
			}
		}
	}
	
		
	::v-deep .imageBox swiper{
		height: 70vh !important;
	}
	.listBox{
			top: 840rpx;
			// margin-top: 960rpx;
			position: absolute;
			overflow-y: scroll;
			z-index: 0;
			width: 100%;
			padding: 0rpx 30rpx 40rpx;
			.list{
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;
				.code{
					color: #979797;
					font-weight: 400;
					font-size: 12px;
					line-height: 20px;
					margin-bottom: 14rpx;
				}
				.list_t{
					border-top: 1px solid #F9F9F9;
					padding: 10rpx 0;
					image{
						width: 120rpx;
						height: 120rpx;
					}
					.list_t_r{
						width: 100%;
						.list_t_r_t{
							font-size: 28rpx;
							font-weight: 400;
							.name{
								margin-top: 10rpx;
							}
							.state{
								color: #7F8084;
							}
						}
						.specifications{
							font-size: 26rpx;
							font-weight: 400;
							color: #979797;
							margin:8rpx 0;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.time{
							font-size: 24rpx;
							font-weight: 400;
							color: #979797;
							margin: 20rpx 0;
						}
					}
				}
				.list_b{
					font-size: 28rpx;
					font-weight: 400;
					color: #7F8084;
					padding-top: 30rpx;
					.text{
						.money{
							display: inline-block;
							font-size: 32rpx;
							font-weight: 600;
							color: #000;
						}
					}
				}
				
				.btnBox{
					width: 100%;
					margin-top: 30rpx;
					flex-direction: row-reverse !important;
					.btn{
						width: 132rpx;
						height: 46rpx;
						line-height: 46rpx;
						border-radius: 46rpx;
						text-align: center;
						background-color: #000;
						color: #fff;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
				
			}
		}
	.scrollHight {
		height: 100%;
		z-index: 10;
		overflow: scroll;
		
	}
</style>
